import { defineComponent, ref } from "vue";
import styles from "./PerDetailContent.module.less";
import { HeartOutlined, HeartFilled } from "@ant-design/icons-vue";
import { imgPath } from "@/common/utils";
export default defineComponent({
  props: {
    state: {
      type: Object,
    },
  },
  setup(props: any) {
    const plans = ref([
      {
        label: '方案一',
        value: '方案一',
      },
      {
        label: '方案二',
        value: '方案二',
      },
      {
        label: '方案三',
        value: '方案三',
      },
    ])
    return () => (
      <div class={styles['perDetail-content']}>
        <div class={styles['perDetail-header']}>
          <span>{props.state.name}</span>
          <img src={imgPath("/pinan.png")} />
        </div>
        <div class={styles['perDetail-container']}>
          <div class={styles['perDetail-left']}>
            <img class={styles['perDetail-img']} src="http://www.chinatourins.com/static/img/99_07.f162ac3.png" />
            <div class={styles['insure_introduction']}>
              本产品支持在线投保、核保、批改、退保、报案、理赔、投诉
            </div>
          </div>
          <div class={styles['perDetail-right']}>
            <div class={styles['product-earmarks']}>
              {
                props.state.earmarks.map((item:any) => (
                  <div class={styles['product-earmark']}>{item}</div>
                ))
              }
            </div>
            <div class={styles['product-form']}>
              <div class={styles['product-form-item']}>
                <div class={styles['item-col']}>
                  <span class={styles['col-label']}>承保年龄:</span>
                  <div class={styles['col-content']}>出生满30天（含）-100周岁（含）</div>
                </div>
                <div class={styles['item-col']}>
                  <span class={styles['col-label']}>最大购买份数:</span>
                  <div class={styles['col-content']}>1</div>
                </div>
                <div class={styles['item-col']}>
                  <span class={styles['col-label']}>购买份数:</span>
                  <div class={styles['col-content']}>
                    <a-select class={styles['col-select']} v-model:value={props.state.count}>
                      <a-select-option value={1}>1</a-select-option>
                    </a-select>
                  </div>
                </div>
              </div>
              <div class={styles['product-form-item']}>
                <div class={styles['item-col']}>
                  <span class={styles['col-label']}>方案选择:</span>
                  <div class={styles['col-content']}>
                    <div class={styles['radio-group']}>
                      {
                        plans.value.map((item: any) => (
                          <div class={[styles['radio-item'], props.state.plan_name === item.value && styles.checked]} onClick={() => { props.state.plan_name = item.value }}>
                            {item.label}
                          </div>
                        ))
                      }
                    </div>
                  </div>
                </div>
              </div>
              <div class={styles['product-form-item']}>
                <div class={styles['item-col']}>
                  <span class={styles['col-label']}>保险日期:</span>
                  <div class={styles['col-content']}>
                    <a-date-picker class={styles['col-datePicker']} v-model:value={props.state.start_date} placeholder="起保时间" clearable />
                    <span class={styles.connect}>至</span>
                    <a-date-picker class={styles['col-datePicker']} v-model:value={props.state.end_date} placeholder="终止时间" clearable />
                  </div>
                </div>
              </div>
            </div>
            <div class={styles['submit-btn']}>立即投保</div>
          </div>
        </div>
        <div class={styles['perDetail-footer']}>
          <div class={styles['footer-col']}>
            <span class={styles['col-label']}>销售范围：</span>
            <span class={styles['col-content']}>全国</span>
          </div>
          <div class={[styles['footer-col'], styles.clickable]} onClick={() => props.state.is_collect = Number(!props.state.is_collect)}>
            <HeartOutlined class={styles['is_unCollect']} v-show={!props.state.is_collect} />
            <HeartFilled class={styles['is_collect']} v-show={props.state.is_collect} />
            <span class={styles['col-content']}>收藏</span>
          </div>
        </div>
      </div>
    )
  }
})